<template>
    <view class="nav-box" :style="{'height':height+'px'}">
      <!-- 自定义导航栏 ,'background':bgColor -->
      <view class="status_bar" :style="{'height':statusBarHeight+'px'}">
            <!-- uni-ui这里是状态栏 -->
      </view>
      <!-- 胶囊位置信息 -->
      <view class="nav-main flex align-center justify-center" :style="{height: navBarHeight+'px'}">
        <view class="nav-main-back" @click="back" v-if="backIcon">
          <uni-icons type="back" size="26" color="#fff"></uni-icons>
        </view>
        <text v-if="showTitle" class="nav-main-title radius" :style="{'background': titleColor}">{{title}}</text>
      </view>
    </view>
</template>
 
<script>
  export default {
    props:{
      bgColor: {type:String,default: '#F5F5F5'},
      backIcon: {type: Boolean, default: true},
      title: {type:String,default:''},
	  showTitle: {type: Boolean, default: false},
	  titleColor: {type:String,default: '#fff'},
    },
    data() {
        return {
          //总高度
          height: 0,
          //胶囊位置信息
          menuButtonRect: {},
          //状态栏的高度
          statusBarHeight: 0 ,
          //导航栏的高度
          navBarHeight: 0
        }
    },
	created() {
		// this.height = wx.getStorageSync('navBarHeight')
		this.getHeight()
		uni.showShareMenu({
		                withShareTicket: true,
		                menus: ['shareAppMessage', 'shareTimeline']
		      })		
	},
    methods: {      
      //获取屏幕导航栏高度
      getHeight(){
        if (wx.canIUse('getMenuButtonBoundingClientRect')) {
          let sysInfo = wx.getSystemInfoSync() //状态栏的高度
          this.statusBarHeight = sysInfo.statusBarHeight
          // 胶囊位置信息
          let rect = wx.getMenuButtonBoundingClientRect()
          this.menuButtonRect = JSON.parse(JSON.stringify(rect))
          // 导航栏高度
          let navBarHeight = (rect.top-sysInfo.statusBarHeight)*2+rect.height
          this.navBarHeight = navBarHeight
          // 自定义导航栏的高度
          this.height = sysInfo.statusBarHeight + navBarHeight
        } else {
          wx.showToast({
            title: '您的微信版本过低，界面可能会显示不正常',
            icon: 'none',
            duration: 4000
          })
        }
      },
      //返回
      back() {
			uni.navigateBack({
				delta: 1
			})
		},
    }
  }
</script>
 
<style lang="scss" scoped>
.status_bar {
        // height: var(--status-bar-height);
        width: 100%;
        // background:#ff0;
    }
	.nav-main{
    position: relative;
        // background:#f00;
    .nav-main-back{
      position: absolute;left: 10rpx;
    }
    .nav-main-title{font-size:12px; height: 35rpx; text-align: center; color: #000; margin: 20rpx 20rpx; padding: 10rpx 20rpx;}
	}
</style>